<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>ATND Notify Config</title>
	<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" title="default" />
	<!--  jquery core -->
	<script src="js/jquery/jquery-1.4.1.min.js" type="text/javascript"></script>

	<!--  checkbox styling script -->
	<script src="js/jquery/jquery.bind.js" type="text/javascript"></script>
	<script src="js/jquery/jquery.selectbox-0.5_style_2.js" type="text/javascript"></script>
	<script type="text/javascript" src="/js/atnd.js"></script>
	<script src="js/jquery/custom_jquery.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/jquery-lightbox/js/jquery.lightbox-0.5.js"></script>
    <link rel="stylesheet" type="text/css" href="js/jquery-lightbox/css/jquery.lightbox-0.5.css" media="screen" />
	<style type="text/css">
		.keywordDelete {
			width: 65px;
			height: 30px;
		}
		.liKeyword {
			margin-bottom: 5px;
		}
	</style>

	<script type="text/javascript">
	var BG = chrome.extension.getBackgroundPage();
	var options = BG.options;
	$(function(){
		var host = 'chrome-extension://' + location.host + '/html/options/';
		$("#news").attr("href", host + 'news.html');
		$("#about").attr("href", host + 'about.html');
		$("#calendar").attr("href", host + 'calendar.html');

		$('#configImage').lightBox();

		if (options.user_id != '') {
			$('#user_nickname').text(options.user_nickname + ' さん').attr('href', 'http://atnd.org/users/' + options.user_id).attr('target', '_blank');
		} else {
			$('#user_nickname').text('Guest さん').attr('href', 'http://atnd.org/').attr('target', '_blank');
		}

		options.keywordList.forEach(function (keyword, i) {
			$("#keywordList").append(createInput(keyword, i));
		});
		$("#keywordList").append(createInput('', options.keywordList.length));
		if ($('.keywordDelete').length == 1) {
			$('.keywordDelete').attr('disabled','disabled');
		}

		$.each(options.dateNotifyList, function (i, e) {
			$('#notify' + e).attr('checked', 'checked');
		});
		$('.dateNotify').change(save);

		$.each(options.ownerList, function (i, owner) {
			var link = $('<a>').attr('target', '_blank').attr('href', 'http://atnd.org/users/' + owner.user_id).text(owner.nickname);
			$('#ownerList').append($('<li>').append(link));
		});
		
		$("input[name='calenderType']").val([options.calenderType]);
		$("input[name='calenderType']").change(save);
		
	});

	function save() {
		var keywordArray = $('#keywordList :text[value]').map(function (i, item){
			return $(item).val();
		});
		options.keywordList = $.makeArray($.unique(keywordArray));

		var dateNotifyList = [];
		$("input[type='checkbox']").each(function (i, e) {
			if ($(e).is(':checked')) {
				dateNotifyList.push(parseInt($(e).val()));
			}
		});
		options.dateNotifyList = dateNotifyList;
		options.calenderType = $("input[name='calenderType']:checked").val();

		options.save();
		setTimeout(function(){
			BG.timer.restart();
		}, 5000);
	}

	function createInput(keyword, i) {
		var input = $('<input>').attr('type', 'text').val(keyword).addClass('keywordText').addClass('inp-form').data('index', i);
		input.change(function () {
			var text = $(this);
			text.val(text.val().trim());
			if (text.val() != '' && $('.keywordText:last').data('index') == text.data('index')) {
				$("#keywordList").append(createInput('', text.data('index') + 1));
				$('.keywordDelete:disabled').attr('disabled','').focus();
			}
			save();
		});
		var deleteBtn = $('<input>').attr('type', 'button').val('削　除').addClass('keywordDelete').data('index', i);
		deleteBtn.click(function () {
			$(this).parent().remove();
			var delButtons = $('.keywordDelete');
			if (delButtons.length == 1) {
				delButtons.attr('disabled','disabled');
			} else {
				delButtons.attr('disabled','');
			}
			$('.keywordText:last').focus();
			save();
		});
		var li = $('<li>').addClass('liKeyword').append(input).append(deleteBtn);
		return li;
	}

	</script>
</head>
<body>
<div id="page-top-outer">
	<div id="page-top">
		<div id="logo">
		<a href=""><img src="images/shared/logo.png" width="156" height="40" alt="" /></a>
		</div>
	</div>
</div>
<div class="clear">&nbsp;</div>

<!--  start nav-outer-repeat................................................. START -->
<div class="nav-outer-repeat">
<!--  start nav-outer -->
<div class="nav-outer">
		<!-- start nav-right -->
		<div id="nav-right">

			<div class="nav-divider">&nbsp;</div>
			<div class="showhide-account">
				<img src="images/shared/nav/account.png" width="12" height="18" style="float: left;" alt="" />
				<div style="padding: 7px 0px 0px 20px; height: 18px;">
					<span style="font-weight: bold;font-size: 14px;"><a id="user_nickname" class="userLink"  style="color: white;"  href="http://atnd.org/users/"></a></span>
				</div>
			</div>
			<div class="clear">&nbsp;</div>

		</div>
		<!-- end nav-right -->
	<div class="nav">
		<div class="table">
			<ul class="current"><li><a href="#nogo"><b>Config</b></a></li></ul>
			<div class="nav-divider">&nbsp;</div>
			<ul class="select"><li><a id="news" href="#nogo"><b>News</b></a></li></ul>
			<div class="nav-divider">&nbsp;</div>
			<ul class="select"><li><a id="about" href="#nogo"><b>About</b></a></li></ul>
			<div class="nav-divider">&nbsp;</div>
			<ul class="select"><li><a id="calendar" href="#nogo"><b>Calendar</b></a></li></ul>
			<div class="nav-divider">&nbsp;</div>
			<div class="clear"></div>
		</div>
		<div class="clear"></div>
	</div>
</div>
<div class="clear"></div>
<!--  start nav-outer -->
</div>
<!--  start nav-outer-repeat................................................... END -->

 <div class="clear"></div>

<!-- start content-outer -->
<div id="content-outer">
<!-- start content -->
<div id="content">

<div id="page-heading"><h1>ATND Notifyの設定</h1></div>

	<table border="0" width="100%" cellpadding="0" cellspacing="0" id="content-table">
	<tr>
		<th rowspan="3" class="sized"><img src="images/shared/side_shadowleft.jpg" width="20" height="300" alt="" /></th>
		<th class="topleft"></th>
		<td id="tbl-border-top">&nbsp;</td>
		<th class="topright"></th>
		<th rowspan="3" class="sized"><img src="images/shared/side_shadowright.jpg" width="20" height="300" alt="" /></th>
	</tr>
	<tr>
		<td id="tbl-border-left"></td>
		<td>
		<!--  start content-table-inner -->
		<div id="content-table-inner">

		<table border="0" width="100%" cellpadding="0" cellspacing="0">
		<tr valign="top">
		<td>
			<!-- start id-form -->
			<table border="0" cellpadding="0" cellspacing="0"  id="id-form">
			<tr>
				<th valign="top">キーワード:</th>
				<td>
					<ul id="keywordList">
						<!-- <li><input type="text" id="keyword" class="inp-form" /><input type="button" value="削　除" class="keywordDelete" /></li> -->
					</ul>
				</td>
				<td></td>
			</tr>
			<tr>
				<th valign="top">備忘通知:</th>
				<td>
					<label for="notify1" style="color:black;">1日前</label><input class="dateNotify" type="checkbox" id="notify1" value="1" /><br/>
					<label for="notify2" style="color:black;">2日前</label><input class="dateNotify" type="checkbox" id="notify2" value="2" /><br/>
					<label for="notify3" style="color:black;">3日前</label><input class="dateNotify" type="checkbox" id="notify3" value="3" /><br/>
					<label for="notify4" style="color:black;">4日前</label><input class="dateNotify" type="checkbox" id="notify4" value="4" /><br/>
					<label for="notify5" style="color:black;">5日前</label><input class="dateNotify" type="checkbox" id="notify5" value="5" /><br/>
					<label for="notify6" style="color:black;">6日前</label><input class="dateNotify" type="checkbox" id="notify6" value="6" /><br/>
					<label for="notify7" style="color:black;">7日前</label><input class="dateNotify" type="checkbox" id="notify7" value="7" /><br/>
					<label for="notify10" style="color:black;">10日前</label><input class="dateNotify" type="checkbox" id="notify10" value="10" /><br/>
				</td>
				<td></td>
			</tr>
			<tr>
				<th valign="top">カレンダー表示形式:</th>
				<td>
					<input name="calenderType" type="radio" id="calenderGrid" value="grid" checked/>グリッド形式
					<input name="calenderType" type="radio" id="calenderList" value="list" />リスト形式
				</td>
				<td></td>
			</tr>
			<tr>
				<th valign="top">通知する管理者:</th>
				<td><ul id="ownerList"></ul></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
			</tr>
			</table>
			<!-- end id-form  -->
		</td>
		<td>
			<!--  start related-activities -->
			<div id="related-activities">
				<div id="related-act-top">
				<img src="images/forms/config_about.gif" width="271" height="43" alt="" />
				</div>
				<div id="related-act-bottom">
					<div id="related-act-inner">
						<div class="left"><a href=""><img src="images/forms/icon_plus.gif" width="21" height="21" alt="" /></a></div>
						<div class="right">
							<h5>自動保存</h5>
							設定内容は変更すると保存されます。
						</div>
						<div class="clear"></div>
						<div class="lines-dotted-short"></div>
						<div class="left"><a href=""><img src="images/forms/icon_plus.gif" width="21" height="21" alt="" /></a></div>
						<div class="right">
							<h5>キーワード</h5>
							キーワードを設定すると設定したキーワードが含まれるイベント名が見つかった場合に通知します。
						</div>
						<div class="clear"></div>
						<div class="lines-dotted-short"></div>
						<div class="left"><a href=""><img src="images/forms/icon_plus.gif" width="21" height="21" alt="" /></a></div>
						<div class="right">
							<h5>備忘通知</h5>
							参加予定のイベントの開催日が近づくと備忘通知します。
						</div>
						<div class="clear"></div>
						<div class="lines-dotted-short"></div>
						<div class="left"><a href=""><img src="images/forms/icon_plus.gif" width="21" height="21" alt="" /></a></div>
						<div class="right">
							<h5>カレンダー表示形式</h5>
							カレンダーの表示形式を設定します。
						</div>
						<div class="clear"></div>
						<div class="lines-dotted-short"></div>
						<div class="left"><a href=""><img src="images/forms/icon_plus.gif" width="21" height="21" alt="" /></a></div>
						<div class="right">
							<h5>通知する管理者</h5>
							特定管理者が主催するイベントが新規で作成された場合に通知します。
							設定はATNDのイベントページにて行います。
							<ul class="greyarrow">
								<li>
									<a id="configImage" href="images/forms/config_about1.gif" title="ATNDページにボタンが追加されます。ボタンをクリックすると設定できます。">
										設定画面イメージはこちら
									</a>
								</li>
							</ul>
						</div>
						<div class="clear"></div>
					</div>
					<div class="clear"></div>
				</div>
			</div>
			<!-- end related-activities -->
		</td>
		</tr>
		<tr>
			<td><img src="images/shared/blank.gif" width="695" height="1" alt="blank" /></td>
			<td></td>
		</tr>
		</table>

		<div class="clear"></div>
		</div>
		<!--  end content-table-inner  -->
		</td>
		<td id="tbl-border-right"></td>
	</tr>
	<tr>
		<th class="sized bottomleft"></th>
		<td id="tbl-border-bottom">&nbsp;</td>
		<th class="sized bottomright"></th>
	</tr>
	</table>

	<div class="clear">&nbsp;</div>
</div>
<!--  end content -->
<div class="clear">&nbsp;</div>
</div>
<!--  end content-outer -->
<div class="clear">&nbsp;</div>
<div id="footer">
	<div id="footer-left">AtndNotify &copy; Copyright <a href="http://twitter.com/bluerabbit777jp" target="_blank">@bluerabbit777jp</a>. All rights reserved.</div>
	<div class="clear">&nbsp;</div>
</div>
</body>
</html>